<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/normalize.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/framework/css/loginCss.css}"/>
    <style type="text/css">

    </style>
</head>
<body>
<div class="login-top">
    <p>
        <span>万里街道</span>
        <em>欢迎登陆</em>
    </p>
</div>
<div class="login-box">
    <section class="login-left">
        <div class="fb">万里街道沿街商铺</div>
    </section>
    <section class="login">
        <h1 class="fb">用户登录</h1>
        <form action="" method="post" class="layui-form">
            <ul class="relative">
                <li class="textCenter" id="frame" style="display: none">
                    <p>
                        <img th:src="@{/static/framework/img/dl_mmcw.png}">
                        <span id="msg"></span>
                    </p>
                </li>
                <li>
                    <p>
                        <span><img th:src="@{/static/framework/img/login_yhm.png}"></span>
                        <input type="text" id="userName" autocomplete="off" placeholder="请输入用户名"/>
                        <em><img th:src="@{/static/framework/img/close.png}"></em>
                    </p>
                </li>
                <li>
                    <p>
                        <span><img th:src="@{/static/framework/img/login_mm.png}"></span>
                        <input type="password" id="passWord" autocomplete="off" placeholder="请输入登录密码"/>
                        <em><img th:src="@{/static/framework/img/close.png}"></em>
                    </p>
                </li>
            </ul>
            <div class="overflow" pane="">
                <p class="left">
                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="记住账号">
                </p>
                <p class="right">忘记密码</p>
            </div>
        </form>
        <div class="login-btn"><span class="cursor block textCenter white border-radius5 lh50px f18px" id="loginButton">登录</span></div>
    </section>
</div>
<script th:src="@{/static/js/jquery-3.1.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script>


    $(function () {

           layui.use(['form'], function () {
               //监听指定开关
               form.on('switch(switchTest)', function (data) {
                   layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                       offset: '6px'
                   });
               });
           });

        $("span#loginButton").on("click", function (e) {
            login();
        })
    });


    function login() {
        var loginName = $("input#userName").val();
        var password = $("input#passWord").val();

        if (isNull(loginName)) {
            prompt("用户名不能为空")
            return;
        }

        if (isNull(password)) {
            prompt("密码不能为空")
            return;
        }

        $.ajax({
            url: "./login",
            type: "post",
            dataType: "json",
            data: {"loginName": loginName, "password": password},
            success: function (result) {
                if (result.code == "200" || result.code == 200) {
                    window.top.location.href = "./index";
                } else {
                    prompt(result.msg)
                }
            }
        })
    }


    function prompt(msg) {
        $("#frame").css("display", "");
        $("#msg").html(msg);
    }


    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


</script>
</body>
</html>
